<template>
  <div ref="container" class="lsh-box">
    <!-- <div v-for="(item, index) in list" :key="index" :style="{ color: selectList[index] ? 'red' : 'black' }">
      {{ index }}
    </div> -->
  </div>
</template>

<script setup lang='ts'>
import { ref, onMounted } from 'vue';
import { Flow } from '@leafer-in/flow'
import { App, Group, Rect, Leafer } from 'leafer-ui'
import { Editor, EditorEvent } from '@leafer-in/editor' // 导入图形编辑器插件
import { ScrollBar } from '@leafer-in/scroll'
import '@leafer-in/state'
const list = Array.from(new Array(4000));
const selectList = ref([]);

const app = new App({ view: window });
app.tree = app.addLeafer()
app.sky = app.addLeafer({ type: 'document', usePartRender: false, zoom: { min: 0.2, max: 3 } })
app.editor = new Editor()
app.sky.add(app.editor)
new ScrollBar(app, { theme: 'light' })
onMounted(() => {
  const listRect = list.map((item, index) => {
    return Rect.one({
      editable: true,
      draggable: true,
      fill: 'transparent',
      stroke: index % 2 === 1 ? 'rgba(82, 204, 92, 1)' : "rgba(58, 139, 255, 1)",
      hoverStyle: {
        fill: 'rgba(50,205,121, 0.8)'
      },
      selectedStyle: {
        fill: 'rgba(243, 97, 97, 0.6)'
      },
    }, 0 + index * 0.5 * Math.random(), 0 + index * 0.3 * Math.random(), 20, 30);
  })
  const group = new Group({
    x: 0,
    y: 0,
    children: listRect,
  })
  app.tree.add(group)
})
// 监听框选事件
app.editor.on(EditorEvent.SELECT, (e: EditorEvent) => {
  app.editor.editBox.opacity = 0;
  e.oldList.forEach((item) => {
    item.selected = false
  })
  selectList.value = [];
  e.editor.leafList.forEach((item) => {
    item.selected = true
    // selectList.value.push(item);
  })
  selectList.value = Object.keys(e.editor.leafList.keys);
  if (e.editor.leafList.length === 1) {
    app.editor.editBox.opacity = 1;
  }
})

</script>
<style scoped lang='less' >
.lsh-box {
  display: flex;
  flex-wrap: wrap;
  max-width: 1000px;
  max-height: 1000px;
  overflow: scroll;
}
</style>